<template>
	<!--外层容器-->
	<el-container class="app-container" direction="vertical">
		<Header></Header>
		<el-row class="fake-main-body">
			<el-container direction="horizontal" class="fake-main-body">
				<el-col :span="4">
					<Sider></Sider>
				</el-col>
				<el-col :span="20">
					<el-container direction="vertical" style="overflow: hidden;height: 100%">
						<router-view></router-view>
						<Footer></Footer>
					</el-container>
				</el-col>
			</el-container>
		</el-row>
	</el-container>
</template>

<script>
	import Header from '@/components/base/Header'
	import Sider from "@/components/base/Sider"
	import Footer from "@/components/base/Footer"

	export default {
		name: 'home',
		components: {
			Header,
			Sider,
			Footer
		}
	}
</script>

<style scoped>
	.fake-main-body {
		width: 100%;
		height: 100%;
		overflow-y: hidden;
	}
</style>